<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>编辑任务</title>
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/jquery-ui-1.8.18.custom.css" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
	<%@ include file="include/topbar.jsp" %>
	<div class="container" style="margin-top: 60px;" >
			<div class="row">
				<jsp:include page="include/left.jsp" >
					<jsp:param value="goal" name="tag"/>
				</jsp:include>
	<div class="span9 " style="">
      <ul class="breadcrumb" style="margin-bottom:0px;border-radius:3px 3px 0 0">		
				<li >
					<h4>编辑任务</h4>
				</li>
			</ul>
      
      <div class="wall"style="padding-left:150px;border-radius:0 0 3px 3px">
                
               	<p><strong>创建时间：</strong> ${task.createTime}</p>
               	<p><strong>开始时间：</strong>${task.beginTime}</p>
               	 <p><strong>结束时间：</strong>${task.endTime}</p>
               	 <p><strong>任务级别：</strong>${task.level}</p>
                 <p>
                 	<strong>任务描述：</strong>${task.desc }
				</p>
				
	<div class="control-group" id="div05">
            <label for="select02" class="control-label"><strong>任务状态</strong></label>
            <div class="controls">
              <select id="select02">
                <option>新任务</option>
                <option>进行中</option>
                <option>已完成</option>
              </select>
            </div>
          </div>
          
          <div class="control-grop" id="div08" style="width: 360px;">
          <div class="controls">
          	<p><strong>进度:</strong><span id="amount" style="color:green;font-weight:bold">${task.progress}</span><span style="color:green;font-weight:bold">%</span></p>
          	<div id="slider-range-min">
          	</div>
          </div>
          </div>
          
          <div class="control-grop" style="margin-top: 20px;">
            <a class="btn btn-primary" id="edittask">确认操作</a>
            <a class="btn btn-danger" href="task.jspx?gid=${curgoal.id }">返回</a>
          </div>
          
      </div>
     </div>
  </div></div>    
      <script>
      $(document).ready(function() {
      	var taskName = "${task.name}";
      	$(function() {
			$("#slider-range-min").slider({
				range:'min',
				value:'${task.progress}',
				slide:function(event, ui) {
					$("#amount").text(ui.value);
				}
			});
		});
      
      	$("#edittask").click(function() {
      		var state = $("#select02").val();
			var progress = $("#amount").text();
			var taskId = "${task.id}";
			
			if(state.trim() != "" && progress.trim() != "" && taskId.trim() != "") {
				$.ajax({
					url : "edittask.jspx",
					type : "POST",
					data : {
						taskId : taskId,
						state : state,
						progress : progress,
						taskName : taskName
					}
				}).done(function(msg) {
					if(msg == 1) {
						window.location = "task.jspx?gid=${curgoal.id}";
					} else {
						alert("修改失败");
					}
				});
			} else {
				alert("不能为空");
			}
      	});
      });
      	
      </script>
      
</body>
</html>
